import * as React from 'react';
import * as ReactDOM from 'react-dom';



var miniServer = require("../../../app/common/util/common-server.js");
/*验证插件*/
//
var MENUS = React.createClass({
    mixins: [miniServer],
    getInitialState: function() {
        return {
            toggle: false
        };
    },
    handleClick: function() {
        this.setState({
            toggle: !this.state.toggle
        });
    },
    componentWillMount: function() {
        this.server.init(this.showNav).get("/api/?_url=/acl/user/navBar");
    },
    showNav: function(data) {
        console.info("   nav say " + data)
        this.data = data;
        this.setState({
            toggle: false
        })
    },
    render: function() {
        var toggled = this.state.toggle ? 'show' : 'hide';

        return (
            <div className="menu">
                        <span className="menu-nav"><a href="/">首页</a></span>
                        <span className="menu-nav menu-togger" data-toggle={toggled} onClick={this.handleClick}>导航 <i className="caret"></i></span>
                        <div className="menu-ul" data-toggle={toggled}>
                                {this.data&&this.data.result.map((value,index)=>{

                                        return (
                                            <div className="menu-class-one" key={index}>
                                                <h3>{value.name}</h3>
                                                <NavDD items={value.item} key={index} history={this.props.history} location={this.props.location}></NavDD>
                                            </div>
                                        )

                                    })
                                }

                        </div>
                    </div>

        )



    }
});
var NavDD = React.createClass({

    handleClick: function(item, index) {
        let url = item.url;
        window.location.href = url;
        //


    },
    render: function() {
        if (this.props.items) {
            return (
                <ul className="menu-class-two">
                        {
                            this.props.items.map((item,index)=>{

                                return (
                                    <li key={index} onClick={this.handleClick.bind(this,item,index)} >{item.name}</li>
                                )
                            })
                        }
                    </ul>

            )

        } else {
            return (

                <dd></dd>


            )
        }

    }
});

var MENU = React.createClass({
    getDefaultProps: function() {
        return {
            titleCn: {
                "ACL": "权限管理",
                "BI": "BI",
                "CAIGOU": "采购",
                "DMS": "分销",
                "ERP": "ERP",
                "FMS": "财务",
                "Finance": "财务报销",
                "MENJIN": "门禁",
                "workflow": "工作流",
                "KMS": "绩效",
            },
            titleUrl: {
                "ACL": "/#/acl",
                "BI": "/reportapp/#/exportReport",
                "CAIGOU": "/caigou/",
                "DMS": "/dms/",
                "ERP": "/#/workflow/createdProcess/list",
                "FMS": "/fms",
                "Finance": "/baoxiao",
                "MENJIN": "/acs/main",
                "KMS": "/kms/",
            }
        };
    },
    jump: function(url) {
        window.location.href = url;
    },
    render: function() {
        var title = this.props.titleCn[this.props.paramKey];
        var href = this.props.titleUrl[this.props.paramKey];
        return (
            <li className="menu-ul-li" onClick={this.jump.bind(this,href)}>
                    <a  href="javascript:void(0)">{title}</a>
                </li>
        )
    }
})


module.exports = MENUS;